<script setup lang="ts">
import IndicatorDataCurveModal from '@/components/IndicatorDataCurveModal/IndicatorDataCurveModal.vue'
import { useElectricQualityAnalysis } from '../../composable'

interface TableData {
  /** 用能单元名称 */
  unitName: string
  /** 计量器具编号 */
  code: string
  /** 计量器具名称 */
  name: string
  /** 测点编号 */
  pointCode: string
  /** 测点名称 */
  pointName: string
  /** 当前值 */
  value: string
  /** 数据时间 */
  dataTime: string
}

defineOptions({ name: 'ElectricQualityAnalysisTable' })

const indicatorDataCurveModalRef = ref<InstanceType<typeof IndicatorDataCurveModal>>()
const indicatorNumber = ref<string>()

const { loadIndicatorActualTimePage, pagination, pointValData } = useElectricQualityAnalysis()

const loading = ref(false)
const tableData = computed<TableData[]>(() => {
  return pointValData.value.map((item: any) => {
    return {
      unitName: item.pointName,
      code: item.toolsCode,
      name: item.toolsName,
      pointCode: item.indicatorNumber,
      pointName: item.indicatorName,
      value: item.val,
      dataTime: item.dataTime,
    }
  })
})

async function getData() {
  loading.value = true
  try {
    await loadIndicatorActualTimePage()
  }
  finally {
    loading.value = false
  }
}

async function clickValue(code: string) {
  indicatorNumber.value = code
  await nextTick()
  indicatorDataCurveModalRef.value?.showModal()
}

onMounted(() => {
  getData()
})
</script>

<template>
  <div class="flex-auto overflow-auto">
    <ElTable
      v-loading="loading"
      :data="tableData" style="width: 100%" height="100%"
      stripe border :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :tooltip-options="{
        popperClass: 'max-w-300px',
      }"
    >
      <ElTableColumn label="用能单元名称" prop="unitName" />
      <ElTableColumn label="计量器具编号" prop="code" />
      <ElTableColumn label="计量器具名称" prop="name" />
      <ElTableColumn label="测点编号" prop="pointCode">
        <template #default="{ row }">
          <code class="font-mono" @click="() => clickValue(row.pointCode)">
            {{ row.pointCode }}
          </code>
        </template>
      </ElTableColumn>
      <ElTableColumn label="测点名称" prop="pointName" />
      <ElTableColumn label="当前值" prop="value">
        <template #default="{ row }">
          <ElLink type="primary" :underline="false" @click="() => clickValue(row.pointCode)">
            <code class="font-mono">{{ row.value }}</code>
          </ElLink>
        </template>
      </ElTableColumn>
      <ElTableColumn label="数据时间" prop="dataTime" />
    </ElTable>

    <!-- 指标数据折线图 -->
    <IndicatorDataCurveModal
      v-if="indicatorNumber"
      ref="indicatorDataCurveModalRef"
      :indicator-number="indicatorNumber"
    />
  </div>
  <div class="self-end">
    <ElPagination
      v-model:current-page="pagination.pageNumber" v-model:page-size="pagination.pageSize"
      layout="prev, pager, next"
      :total="pagination.total"
      @change="getData"
    />
  </div>
</template>
